import type { TableColumnProps } from '~/components/ProSaasTable/typings'
import type { OrderGisMapPropsType, OrderGisMapWorkOrderNearbyType } from './typings'
import { ElRow, ElCol, ElLink } from 'element-plus'
import ProSaasTable from '~/components/ProSaasTable'
import SaasTitle from '~/components/SaasTitle'
import MapView from '../map/MapView'
import ProcessRecord from './public/ProcessRecord'
import { GUTTER } from '~/utils/const'
import styles from '../../index.module.scss'

export default function GisMap (props: OrderGisMapPropsType) {
  const columns: TableColumnProps<OrderGisMapWorkOrderNearbyType>[] = [
    {
      label: '工单编号',
      prop: 'orderCode'
    },
    {
      label: '报修来源',
      prop: 'repairResource'
    },
    {
      label: '所属部门',
      prop: 'handleDeptId'
    },
    {
      label: '状态',
      prop: 'status'
    },
    {
      label: '故障地点',
      prop: 'defectAddress'
    },
    {
      label: '报修内容',
      prop: 'suppleMemo'
    },
    {
      label: '报修时间',
      prop: 'createTime'
    }
  ]
  return (
    <ElRow gutter={GUTTER}>
      <ElCol span={18}>
        <SaasTitle type="primary">
          <ElLink underline={false}>gis地图</ElLink>
        </SaasTitle>
        <br />
        <MapView id={styles['order-gis-map']} />
        <br />
        <SaasTitle type="primary">
          <ElLink underline={false}>附近工单</ElLink>
        </SaasTitle>
        <br />
        <ProSaasTable<OrderGisMapWorkOrderNearbyType>
          columns={columns}
          data={[]}
          border={false}
          needPagination={false}
        />
      </ElCol>
      <ElCol span={6}>
        <SaasTitle type="primary">
          <ElLink underline={false}>流程记录</ElLink>
        </SaasTitle>
        <br />
        <ProcessRecord processRecordList={props.processRecordList} />
      </ElCol>
    </ElRow>
  )
}
